<template>
  <div id="dswd-home-sixth">
    <div v-if="device === 'desktop'" class="dswd-home-sixth">
      <div class="sixth-top" />
      <div class="sixth-icon">
        <img
          src="../../assets/image/home/sixth/product-icon.png"
          alt="product-icon"
        >
      </div>
      <div class="sixth-sub-title">
        针对设计痛点，提供多维度智能工具，解放设计师
      </div>
      <div class="sixth-wrap">
        <div class="block left">
          <div class="sixth-headInfo">
            <h3 class="link" @click="jumpToYun">TransBIM智能设计平台</h3>
            <img src="../../assets/image/home/sixth/ypt-logo.png" alt="ypt-logo">
          </div>
          <ul>
            <li>
              <span>智绘地暖</span>
              <span>为暖通设计师量身打造</span>
            </li>
            <li>
              <span>结构快捷计算</span>
              <span>为结构设计师量身打造</span>
            </li>
          </ul>
        </div>
        <div class="block right">
          <div
            class="right-block first"
            @mouseover="firstOver"
            @mouseleave="firstLeave"
          >
            <div class="sixth-headInfo">
              <h3>AI智绘地暖</h3>
              <p>AI&nbsp;underfloor&nbsp;heating</p>
              <img src="../../assets/image/home/sixth/dinuan-logo.png" alt="dinuan-logo">
            </div>
            <ul>
              <div v-if="showFirst">
                <li>10分钟快速出图</li>
                <li>AI智能分析线上作业</li>
                <li>轻松修改&nbsp;立即体验</li>
              </div>
              <p>为暖通设计师量身打造</p>
              <img
                src="../../assets/image/home/sixth/jiantou.png"
                alt="jiantou"
                class="link"
                @click="jumpToProducts"
              >
            </ul>
          </div>
          <div class="right-block-dividing" />
          <div
            class="right-block second"
            @mouseover="secondOver"
            @mouseleave="secondLeave"
          >
            <div class="sixth-headInfo">
              <h3 class="link">结构快捷计算</h3>
              <img src="../../assets/image/home/sixth/jiegou-logo.png" alt="jiegou-logo">
              <p>Structural&nbsp;fast&nbsp;computing</p>
            </div>
            <ul>
              <div v-if="showSecond">
                <li>10分钟快速出图</li>
                <li>AI智能分析线上作业</li>
                <li>轻松修改&nbsp;立即体验</li>
              </div>
              <p>为结构设计师量身打造</p>
              <img src="../../assets/image/home/sixth/jiantou.png" alt="jiantou">
            </ul>
          </div>
        </div>
      </div>
      <div class="sixth-dividing-line" />
    </div>
    <div v-if="device === 'ipad'" class="dswd-p-home-sixth">
      <div class="sixth-top" />
      <div class="sixth-icon">
        <img
          src="../../assets/image/home/sixth/product-icon.png"
          alt="product-icon"
        >
      </div>
      <div class="sixth-sub-title">
        针对设计痛点，提供多维度智能工具，解放设计师
      </div>
      <div class="sixth-wrap">
        <div class="block top">
          <div class="sixth-headInfo">
            <h3 @click="jumpToYun">TransBIM智能设计平台</h3>
            <img src="../../assets/image/home/sixth/ypt-logo.png" alt="ypt-logo">
          </div>
          <ul>
            <li>
              <span>智绘地暖</span>
              <span>为暖通设计师量身打造</span>
            </li>
            <li>
              <span>结构快捷计算</span>
              <span>为结构设计师量身打造</span>
            </li>
          </ul>
        </div>
        <div class="block bottom">
          <div class="bottom-block first">
            <div class="sixth-headInfo">
              <h3>AI智绘地暖</h3>
              <p>AI&nbsp;underfloor&nbsp;heating</p>
              <img src="../../assets/image/home/sixth/dinuan-logo.png" alt="dinuan-logo">
            </div>
            <ul>
              <div>
                <li>10分钟快速出图</li>
                <li>AI智能分析线上作业</li>
                <li>轻松修改&nbsp;立即体验</li>
              </div>
              <p>为暖通设计师量身打造</p>
              <img
                src="../../assets/image/home/sixth/jiantou.png"
                alt="jiantou"
                @click="jumpToProducts"
              >
            </ul>
          </div>
          <div class="bottom-block-dividing" />
          <div class="bottom-block second">
            <div class="sixth-headInfo">
              <h3>结构快捷计算</h3>
              <img src="../../assets/image/home/sixth/jiegou-logo.png" alt="jiegou-logo">
              <p>Structural&nbsp;fast&nbsp;computing</p>
            </div>
            <ul>
              <div>
                <li>10分钟快速出图</li>
                <li>AI智能分析线上作业</li>
                <li>轻松修改&nbsp;立即体验</li>
              </div>
              <p>为结构设计师量身打造</p>
              <img src="../../assets/image/home/sixth/jiantou.png" alt="jiantou">
            </ul>
          </div>
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
    <div v-if="device === 'mobile'" class="dswd-m-home-sixth">
      <div class="sixth-top" />
      <div class="sixth-icon">
        <img
          src="../../assets/image/home/sixth/product-icon.png"
          alt="product-icon"
        >
      </div>
      <div class="sixth-sub-title">
        针对设计痛点，提供多维度智能工具，解放设计师
      </div>
      <div class="sixth-wrap">
        <div class="block top">
          <div class="sixth-headInfo">
            <h3 @click="jumpToYun">TransBIM智能设计平台</h3>
            <img src="../../assets/image/home/sixth/ypt-logo.png" alt="">
          </div>
          <ul>
            <li>
              <span>智绘地暖</span>
              <span>为暖通设计师量身打造</span>
            </li>
            <li>
              <span>结构快捷计算</span>
              <span>为结构设计师量身打造</span>
            </li>
          </ul>
        </div>
        <div class="block bottom">
          <div class="bottom-block first">
            <div class="sixth-headInfo">
              <h3>AI智绘地暖</h3>
              <p>AI&nbsp;underfloor&nbsp;heating</p>
              <img src="../../assets/image/home/sixth/dinuan-logo.png" alt="dinuan-logo">
            </div>
            <ul>
              <div>
                <li>10分钟快速出图</li>
                <li>AI智能分析线上作业</li>
                <li>轻松修改&nbsp;立即体验</li>
              </div>
              <p>为暖通设计师量身打造</p>
              <img
                src="../../assets/image/home/sixth/jiantou.png"
                alt="jiantou"
                @click="jumpToProducts"
              >
            </ul>
          </div>
          <div class="bottom-block-dividing" />
          <div class="bottom-block second">
            <div class="sixth-headInfo">
              <h3>结构快捷计算</h3>
              <img src="../../assets/image/home/sixth/jiegou-logo.png" alt="jiegou-logo">
              <p>Structural&nbsp;fast&nbsp;computing</p>
            </div>
            <ul>
              <div>
                <li>10分钟快速出图</li>
                <li>AI智能分析线上作业</li>
                <li>轻松修改&nbsp;立即体验</li>
              </div>
              <p>为结构设计师量身打造</p>
              <img src="../../assets/image/home/sixth/jiantou.png" alt="jiantou">
            </ul>
          </div>
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      showFirst: false,
      showSecond: false
    }
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device
    })
  },
  methods: {
    jumpToYun() {
      window.open(this.global.yunUrl)
    },
    jumpToProducts() {
      this.$router.push('/layout/products')
    },
    firstOver() {
      this.showFirst = true
    },
    firstLeave() {
      this.showFirst = false
    },
    secondOver() {
      this.showSecond = true
    },
    secondLeave() {
      this.showSecond = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/home/sixth.scss";
</style>